<template>
	<view class="g-switch-content">
		<view class="g-switch" :class="[Cpu_disabled]" @click="handClick">
			<view class="circle" :class="[Cpu_position]"  v-show="circleDisplay">
				<view class="padCircle"></view>
			</view>
			<view class="sk-circle" v-show="loadingDisplay">
				<view :class="`sk-circle${index+1} sk-child`" v-for="(item,index) in 12" :key='index'></view>
			</view>
		</view>
	</view>
</template>

<script>
	
export default {
	/*
	* v-model 开关状态
	 * prop {Boolean} disabled 是否禁用
	 * 可通过theme.scss来配置颜色主题 $g-main-primary，$g-text-dark
	 */
	name:'g-empty',
	data() {
		return {
			status:true,
			circleDisplay:true,//圆点的状态
			loadingDisplay:false,
		};
	},
	props: {
		value:{
			type:Boolean
		},
		disabled:{
			type:Boolean,
			default:false,
		}
	},
	methods: {
		handClick(){
			if(!this.disabled){
				this.status=!this.status
			}
		}
	},
	watch:{
		status:{
			handler:function(n,o){
				this.$emit("input",n)
				this.$emit("change",n)
			}
		},
		value:{
			handler:function(n,o){
				this.status = this.value
			},
			immediate:true,//最先获取外部的值
		}
	},
	computed: {
		Cpu_disabled(){
			if(this.status){
				if(this.disabled){
					return `g-switch-open-disabled`
				}else{
					return `g-switch-open`
				}
			}else{
				return `g-switch-close`
			}
		},
		Cpu_position(){
			//获得小圆点的位置
			if(this.status){
				return 'circle-toRight'
			}
		},
	},
	created() {
		
	}
};
</script>
<style lang="scss" scoped>
	@import "../../theme.scss";
	@mixin reduceColor($color-bg) {
		background-color:mix($color-bg, #ffffff,20%) !important;
	}
	.g-switch-content{
		display: inline-block;
	}
	.g-switch{
		display: flex;
		align-items: center;
		width: 70rpx;
		padding: 0 4rpx;
		height: 40rpx;
		border-radius: 20rpx;
		transition: 0.15s linear;
		&-open{
			background:$g-main-primary;
			&-disabled{
				@include reduceColor($g-main-primary) 
			}
		}
		&-close{
			background:$g-text-dark;
		}
		.circle{
			display: flex;
			justify-content:center;
			align-items: center;
			width: 20rpx;
			height: 20rpx;
			border: 4rpx solid #ffffff;
			border-radius: 50%;
			transition: 0.15s linear;
			&-toRight{
				transform: translateX(40rpx);
			}
		}
	}
	//加载的动画
	.sk-circle {
		@-webkit-keyframes sk-circleBounceDelay {
		  0%, 80%, 100% {
		    -webkit-transform: scale(0);
		            transform: scale(0);
		  } 40% {
		    -webkit-transform: scale(1);
		            transform: scale(1);
		  }
		}
		
		@keyframes sk-circleBounceDelay {
		  0%, 80%, 100% {
		    -webkit-transform: scale(0);
		            transform: scale(0);
		  } 40% {
		    -webkit-transform: scale(1);
		            transform: scale(1);
		  }
		}
	  width: 28rpx;
	  height: 28rpx;
	  position: relative;
	  .sk-child {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	  }
	  .sk-child:before {
	    content: '';
	    display: block;
	    margin: 0 auto;
	    width: 30%;
	    height: 10%;
	    background-color:#ffffff;
	    border-radius: 100%;
	    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
		animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
	  }
	  .sk-circle2 {
	    -webkit-transform: rotate(30deg);
	        -ms-transform: rotate(30deg);
	            transform: rotate(30deg); 
				}
	.sk-circle3 {
	  -webkit-transform: rotate(60deg);
		  -ms-transform: rotate(60deg);
			  transform: rotate(60deg); }
	 .sk-circle4 {
		-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
				transform: rotate(90deg); }
	 .sk-circle5 {
		-webkit-transform: rotate(120deg);
			-ms-transform: rotate(120deg);
				transform: rotate(120deg); }
	   .sk-circle6 {
		-webkit-transform: rotate(150deg);
			-ms-transform: rotate(150deg);
				transform: rotate(150deg); }
	   .sk-circle7 {
		-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
				transform: rotate(180deg); }
	   .sk-circle8 {
		-webkit-transform: rotate(210deg);
			-ms-transform: rotate(210deg);
				transform: rotate(210deg); }
	  .sk-circle9 {
		-webkit-transform: rotate(240deg);
			-ms-transform: rotate(240deg);
				transform: rotate(240deg); }
	  .sk-circle10 {
		-webkit-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
				transform: rotate(270deg); }
	  .sk-circle11 {
		-webkit-transform: rotate(300deg);
			-ms-transform: rotate(300deg);
				transform: rotate(300deg); }
	   .sk-circle12 {
		-webkit-transform: rotate(330deg);
			-ms-transform: rotate(330deg);
				transform: rotate(330deg); }
				
		 .sk-circle2:before {
		  -webkit-animation-delay: -1.1s;
				  animation-delay: -1.1s; }
		.sk-circle3:before {
		  -webkit-animation-delay: -1s;
				  animation-delay: -1s; }
		.sk-circle4:before {
		  -webkit-animation-delay: -0.9s;
				  animation-delay: -0.9s; }
		.sk-circle5:before {
		  -webkit-animation-delay: -0.8s;
				  animation-delay: -0.8s; }
		 .sk-circle6:before {
		  -webkit-animation-delay: -0.7s;
				  animation-delay: -0.7s; }
		 .sk-circle7:before {
		  -webkit-animation-delay: -0.6s;
				  animation-delay: -0.6s; }
		 .sk-circle8:before {
		  -webkit-animation-delay: -0.5s;
				  animation-delay: -0.5s; }
		 .sk-circle9:before {
		  -webkit-animation-delay: -0.4s;
				  animation-delay: -0.4s; }
		 .sk-circle10:before {
		  -webkit-animation-delay: -0.3s;
				  animation-delay: -0.3s; }
		 .sk-circle11:before {
		  -webkit-animation-delay: -0.2s;
				  animation-delay: -0.2s; }
		.sk-circle12:before {
		  -webkit-animation-delay: -0.1s;
				  animation-delay: -0.1s; }
					
	}
	
</style>
